import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group'
// import './style.css'

class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            isShow:true
        }
    }

    
    render() { 
        return ( 
            <div>
                <CSSTransition
                    in={this.state.isShow}  //用于判断是否出现的状态
                    timeout={2000}          //动画持续时间
                    classNames="boss"       //className值，防止重复
                    unmountOnExit           // 删除 DOM
                >
                    <div>初入react世界 之 react-transition-group </div>

                </CSSTransition>
                {/* <div className={this.state.isShow ? 'show' : 'hide'}>初入react世界</div> */}
                <button onClick={this.toToggole.bind(this)}>欢迎</button>
            </div>
        
        );
    }

    toToggole () {
        this.setState({
            isShow: this.state.isShow ? false : true
        })
    }
}
 
export default Boss;